<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="js/jquery-2.0.3.min.js"></script>
        <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!--<script src="js/vue.js"></script>-->
        <!--<script src="js/vue-router.js"></script>-->
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="js/bootstrap.js"></script>
        <style>
        body{
            background-color: rgba(0,0,0,0.3);
        }
        </style>
    </head>
    <body>
       <div id="app">
           <div class="row">
               <div class="col-xs-8 col-xs-offset-2">
                   <div class="page-header">
                       <h1>html学习</h1>
                   </div>
               </div>
           </div>
           <div class="row">
               <div class="col-xs-2 col-xs-offset-2">
                   <div class="list-group">
                       <!--使用router-link组件来导航-->
                       <!--通过传入“to”属性指定链接-->
                       <!-- <router-link> 默认会被渲染为一个 <a> 标签-->
                       <router-link class="list-group-item" to="/h5">html页面</router-link>
                       <router-link class="list-group-item" to="/java">java页面</router-link>
                       <router-link class="list-group-item" to="/python">python页面</router-link>
                   </div>
               </div>
               <div class="col-xs-6">
                   <div class="panel">
                       <div class="panel-body">
                            <!-- 路由出口 -->
                            <!-- 路由匹配到的组件将渲染在这里 -->
                            <router-view></router-view>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       <template id="html5">
           <div>
               <h2>html5学习</h2>
               <p>hello html!</p>
               <img src="img/1.png" alt="">
           </div>
       </template>
       <template id="java">
           <div>
               <h2>java学习</h2>
               <p>hello java!</p>
               <img src="img/1.png" alt="">
           </div>
       </template>
       <template id="python">
           <div>
               <h2>python学习</h2>
               <p>hello python!</p>
               <img src="img/1.png" alt="">
           </div>
       </template>
       <script>
//1.创建组件
const Html5 = Vue.extend({
    template:'#html5'
});
const java = Vue.extend({
    template:'#java'
});
const python = Vue.extend({
    template:'#python'
});
//2.定义路由
const routes=[
    {path:'/h5',component:Html5},
    {path:'/java',component:java},
    {path:'/python',component:python},
    //配置根路由  默认打开的界面
    {path:'/',redirect:'/h5'}
];
//3.创建路由实例
const router=new VueRouter({
    // routes:routes 根据es6语法，键值对中键和值相同时候可以放一个就可以了
    routes
});
//4.创建vue实例并挂载
new Vue({
    router
}).$mount('#app')
</script>
    </body>
</html>
